<template>
  <div class="index">
     <div id="container" v-show="!loader.show">
        <h1>自由教师申请</h1>
        <h6>欢迎加入大手小牵教师行列<br/>免费申请成为大手小牵认证教师</h6>
        <div class="items">
            <ul>
                 <router-link  :to="{path: '/basicInfo',query:{userId:userId}}" :class="{'finish':finishArr.indexOf('TeacherBaseInfo')>-1}" tag="li">
                      <label>基本资料</label>
                      <div class="right">请填写姓名、性别、年龄</div>
                 </router-link>
                 <router-link :to="{path: '/schoolInfo',query:{userId:userId}}" :class="{'finish':finishArr.indexOf('TeacherEducationInfo')>-1}" tag="li">
                      <label>学校信息</label>
                      <div class="right">请填写本科及高考信息</div>
                 </router-link>
                 <router-link :to="{path: '/teachingExperience',query:{userId:userId}}" :class="{'finish':finishArr.indexOf('TeacherExperienceInfo')>-1}" tag="li">
                      <label>教学经验</label>
                      <div class="right">添加教学经验</div>
                 </router-link>
                 <router-link :to="{path: '/teacherSubject',query:{userId:userId}}" :class="{'finish':finishArr.indexOf('TeacherSubjectInfo')>-1}" tag="li">
                      <label>教学课程</label>
                      <div class="right">选择教学课程</div>
                 </router-link>
                 <router-link  :to="{path: '/teachingTime',query:{userId:userId}}" :class="{'finish':finishArr.indexOf('TeacherTeachingTimeInfo')>-1}" tag="li">
                      <label>教学时间</label>
                      <div class="right">选择教学时间</div>
                 </router-link>
                 <router-link  :to="{path: '/teacherPicture',query:{userId:userId}}" :class="{'finish':finishArr.indexOf('TeacherPicture')>-1}" tag="li">
                      <label>我的相册</label>
                      <div class="right">上传头像及相册</div>
                 </router-link>
            </ul>
        </div>
        <div class="hint">
              <p>请务必使用本人微信填写申请信息</p>
              <p>提交申请前请仔细阅读<a>《大手小牵使用协议》</a></p>
        </div>
        <p class="commit" @click="commit()">提交审核</p>
     </div>
     <!--公共提示-->
     <tip :tip="tip" :loading="loading" :loader="loader"></tip>
  </div>
</template>

<script>
import tip from './tip'
export default {
  name:'index',
  data () {
    return {
       userId:'', 
       code:'',
       finishArr:[],
       tip:{
         status:false,
         msg:''
       },
       loading:{
         status:false,
         msg:''
       },
       loader:{
        show:true
       }
    }
  },
  components:{
    tip
  },
  mounted:function(){
     this.code=this.getQueryString("code");
     this.getOpenId();
  },
  activated:function(){
     if(sessionStorage.userId){
       this.userId=sessionStorage.userId;
       this.getData();
     }
  },
  methods:{
    getQueryString(name) { 
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); 
        var r = window.location.search.substr(1).match(reg); 
        if (r != null) return unescape(r[2]); return null; 
    },
    getOpenId(){
       let _this=this;
        _this.$http.get('/jeewx/canxinController.do?getUserInfoByAuthorCode&code='+_this.code).then((data)=>{
            console.log(data);
            _this.userId=data.body.openid;
            _this.getData();
        })
    },
    /*getOpenId(){
       let _this=this;
        _this.$http.get('/jeewx/canxinController.do?getOpenIdByAuthorCode&code='+_this.code+'&url=https://canxin.mynatapp.cc').then((data)=>{
           console.log(data);
            _this.userId=data.body.openId;
            _this.getData();
        })
    },*/
    getData(){
       let _this=this;
        _this.$http.get("/api/teacherController.do?id="+_this.userId+"&getTeacherRegistionStatusById=null").then((data)=>{
           var dataObj=data.body;
           var k;
           for(k in dataObj){console.log(k);
               if(dataObj[k]=="ok"){
                  _this.finishArr.push(k);
               }
           }
           _this.loader.show=false;
           sessionStorage.userId=_this.userId;
        })
    },
    //提示
    showTip(msg){
        let _this=this;
        _this.tip.msg=msg;
        _this.tip.status=true;
        setTimeout(function(){_this.tip.status=false;},1000);
    },
    commit(){
        let _this=this;
        if(_this.finishArr.length!=6){
            _this.showTip("请填写完整的信息");
            return false;
        }
        _this.loading.msg="提交中...";
        _this.loading.status=true;
        _this.$http.get("/api/teacherController.do?id="+_this.userId+"&setCommitRegistionInfo=null").then((data)=>{
           _this.loading.status=false;
           _this.showTip("申请成功");
        })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.index
{
    h1
    {
        text-align:center;
        padding:0.6rem 0 0.3rem 0;
        font-size:0.5rem;
        color:#078def;
    }
    h6
    {
        line-height:0.3rem;
        color:#999;
        text-align:center;
    }
    .items
    {
        margin:0.3rem 0.24rem;
        background:#fff;
        border-radius:0.1rem;
        ul 
        {
            padding-left:0.3rem;
            li
            {
                line-height:0.88rem;
                border-bottom:1px solid #eee;
                position:relative;
                &:last-child
                {
                   border-bottom:none; 
                }
                &::before 
                {
                   content:'×';
                   display:inline-block;
                   background:#ff711a;
                   width:0.4rem;
                   height:0.4rem;
                   line-height:0.4rem;
                   border-radius:50%;
                   color:#fff;
                   text-align:center;
                   font-size:0.3rem;
                   margin-right:0.1rem;
                }
                &.finish
                {
                    &::before 
                    {
                       content:'√';
                       display:inline-block;
                       background:#078def;
                       width:0.4rem;
                       height:0.4rem;
                       line-height:0.4rem;
                       border-radius:50%;
                       color:#fff;
                       text-align:center;
                       font-size:0.3rem;
                       margin-right:0.1rem;
                    }
                }
                .right
                {
                    height:0.88rem;
                    line-height:0.88rem;
                    float:right;
                    margin-right:0.3rem;
                    color:#999;
                    &::after 
                    {
                       content:'';
                       display:inline-block;
                       width:0.15rem;
                       height:0.15rem;
                       border-right:1px solid #999;
                       border-top:1px solid #999;
                       -webkit-transform: rotate(45deg);
                          -moz-transform: rotate(45deg);
                           -ms-transform: rotate(45deg);
                            -o-transform: rotate(45deg);
                               transform: rotate(45deg);
                    }
                }
                label
                {
                  font-size:0.28rem;
                }
            }
        }
    }
    .hint
    {
        margin:0.3rem 0.24rem;
        background:#fff;
        border-radius:0.1rem;
        padding:0.2rem 0.3rem;
        p
        {
            line-height:0.36rem;
            font-size:0.24rem;
            color:#666;
        }
    }
    .commit
    {
        margin:0 0.24rem;
        line-height:0.8rem;
        height:0.8rem;
        border-radius:0.1rem;
        text-align:center;
        background:#078def;
        color:#fff;
        font-size:0.32rem;
    }
}
</style>
